<template>
  <div class="levitation">
    <ul>
      <li>
        <ul :class="[flagContact ? 'show-way' : 'hide-way', 'contact-way']">
          <li @click="sureContact('fineWestPhone', '法定工作日 09:00-18:00')">电话</li>
          <li @click="sureContact('fineWestWeChar', '客服 （微信号 finewest028）')">微信</li>
        </ul>
        <img @click.stop="contact()" :src="flagContact ? close : customerService" width="41" height="41">
      </li>
      <li @click="backTop"><img src="../assets/picture/go-top.png" width="41" height="41"></li>
    </ul>
  </div>
</template>
<script>
  import close from '../assets/picture/close.png'
  import customerService from '../assets/picture/customer-service.png'
  export default{
    name: 'levitation',
    data () {
      return {
        flagContact: false,
        close: close,
        customerService: customerService
      }
    },
    methods: {
      sureContact: function (howWay, msg) {
        this.$emit('upupGo', howWay)
        this.$eventHub.$emit('contactWay', msg)
      },
      contact: function () {
        this.flagContact = !this.flagContact
        return false
      },
      changehide: function () {
        this.flagContact = false
      },
      backTop: function () {
        var prevent = function (event) {
          if (event.cancelable) {
            if (!event.defaultPrevented) {
              event.preventDefault()
            }
          }
        }
        var timer = null
        clearInterval(timer)
        timer = setInterval(function () {
          var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
          var nowTop = scrollTop
          var speed = nowTop / 7
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
          if (scrollTop === 0) {
            clearInterval(timer)
            document.removeEventListener('touchmove', prevent, false)
          } else {
            document.addEventListener('touchmove', prevent, false)
            document.documentElement.scrollTop = nowTop - speed
            document.body.scrollTop = nowTop - speed
          }
        }, 10)
      }
    }
  }
</script>

<style scope lang="scss">
  .levitation{
    position: fixed;
    right: 2px;
    bottom: 50px;
    z-index: 99;
    img{
      display: inherit;
      margin-bottom: 9px;
    }
    ul.contact-way {
      width: 41px;
      overflow: hidden;
      background:url(../assets/picture/contact-background.png) no-repeat;
      background-size: 100% 100%;
      margin-bottom: 9px;
      li{
        margin: 0 auto;
        font-size: 13px;
        color: #000000;
        width: 13px;
        word-wrap: break-word;
        &:first-child{
          padding: 20px 0 10px;
          position: relative;
          &:after{
            position: absolute;
            content: '';
            width: 20px;
            height: 1px;
            background-color: #d3d3d3;
            bottom: 0;
            left: -3px;
          }
        }
        &:last-child {
           padding: 10px 0 20px;
        }
      }
    }
  }
  .levitation ul.contact-way.show-way{
    display: block;
    animation: myfirst 0.1s;
    -moz-animation: myfirst 0.1s;	/* Firefox */
    -webkit-animation: myfirst 0.1s;	/* Safari 和 Chrome */
    -o-animation: myfirst 0.1s;
  }
  .levitation ul.contact-way.hide-way{
    height: 0;
    animation: mysecond 0.1s;
    -moz-animation: mysecond 0.1s;	/* Firefox */
    -webkit-animation: mysecond 0.1s;	/* Safari 和 Chrome */
    -o-animation: mysecond 0.1s;
  }
  @keyframes myfirst
  {
    from {height: 0;}
    to {height: 124px;}
  }
  @-moz-keyframes myfirst /* Firefox */
  {
    from {height: 0;}
    to {height: 124px;}
  }

  @-webkit-keyframes myfirst /* Safari 和 Chrome */
  {
    from {height: 0;}
    to {height: 124px;}
  }

  @-o-keyframes myfirst /* Opera */
  {
    from {height: 124px;}
    to {height: 0px;}
  }

  @keyframes mysecond
  {
    from {height: 124px;}
    to {height: 0px;}
  }
  @-moz-keyframes mysecond /* Firefox */
  {
    from {height: 124px;}
    to {height: 0px;}
  }

  @-webkit-keyframes mysecond /* Safari 和 Chrome */
  {
    from {height: 124px;}
    to {height: 0px;}
  }

  @-o-keyframes mysecond /* Opera */
  {
    from {height: 124px;}
    to {height: 0px;}
  }
</style>
